import React, { Component } from 'react'
import { Layout, Breadcrumb } from 'antd'
import Menu from '../Layout/Menu'
import Header from '../Layout/Header'
import { Link } from 'react-router-dom'
const { Content, Footer, Sider } = Layout
export default Page => {
  return class extends Component {
    constructor(props) {
      super(props)
      this.state = {
        collapsed: false
      }
    }
    //菜单收回
    toggle = () => this.setState({ collapsed: !this.state.collapsed })
    render() {
      const { breadcrumb, location } = this.props
      let breadcrumbNameMap = {}
      breadcrumb.Pages.forEach(item => (breadcrumbNameMap[item.path] = item.title))
      const pathSnippets = location.pathname.split('/').filter(i => i)

      const extraBreadcrumbItems =
        breadcrumb.breakData && breadcrumb.breakData.length > 0
          ? breadcrumb.breakData.map((route, index) => {
              if (!route.url) return <Breadcrumb.Item key={index}>{route.title}</Breadcrumb.Item>
              return (
                <Breadcrumb.Item key={index}>
                  <Link to={route.url}>{route.title}</Link>
                </Breadcrumb.Item>
              )
            })
          : pathSnippets.map((route, index) => {
              const url = `/${pathSnippets.slice(0, index + 1).join('/')}`
              if (pathSnippets.length - 1 <= index) {
                return (
                  <Breadcrumb.Item key={url}>
                    {breadcrumbNameMap[url] ? breadcrumbNameMap[url] : breadcrumbNameMap[url]}
                  </Breadcrumb.Item>
                )
              }
              return (
                <Breadcrumb.Item key={url}>
                  <Link to={url}>
                    {breadcrumbNameMap[url] ? breadcrumbNameMap[url] : breadcrumbNameMap[url]}
                  </Link>
                </Breadcrumb.Item>
              )
            })
      const breadcrumbItems = [
        <Breadcrumb.Item key="home">
          <Link to="/">首页</Link>
        </Breadcrumb.Item>
      ].concat(extraBreadcrumbItems)
      return (
        <Layout style={{ minHeight: '100vh' }}>
          <Sider collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
            <Logo collapsed={this.state.collapsed} />
            <Menu collapsed={this.state.collapsed} />
          </Sider>
          <Layout>
            <Header collapsed={this.state.collapsed} onChangToggle={this.toggle} />
            <Content style={{ margin: '10px 16px 0', display: 'flex', flexDirection: 'column' }}>
              <div>
                <Breadcrumb>{breadcrumbItems}</Breadcrumb>
              </div>
              <div className="sys-content">
                <Page {...this.props} />
              </div>
            </Content>
            <Footer className="sys-foot">版权所有 ©2018 溢米辅导</Footer>
          </Layout>
        </Layout>
      )
    }
  }
}
//##############
//以下为当前页面的子组件
//##############
/**
 * Logo，外框组件的logo
 * @param props 属性
 * @return {*}
 * @constructor
 */
function Logo(props) {
  return (
    <Link to={'/'}>
      <div className="logo-wrap">
        <div className="logo" />
        {!props.collapsed && <div className="logo-text">溢米辅导</div>}
      </div>
    </Link>
  )
}
